<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <h1>{{ msg }}</h1>
    <i-xd></i-xd>
    <i-xe></i-xe>

</div>
</body>

<script src="lib/vue.js"></script>

<script type="text/javascript">

    /* 计算机原理： 32 2^32 = 4G 64 位 2^64
    * 计算机三大总线(bus)：
    * 1. 地址总线
    * 2. 控制总线
    * 3. 数据总线
    *
    * */
    /* 事件车：只是一个 vue 实例对象 */
    const EventBus = new Vue(); // 中间人（1. 事件的监听 2. 事件的触发）

    /*
    * 需求：熊大想把数据给熊二
    *
    * 1. 熊二先做事件监听
    * 2. 熊大触发事件
    * 3. 熊二收到数据
    * */
    Vue.component('i-xd', {
        data() {
            return {
                msg: '我有一罐蜂蜜，我想给熊二',
                info: '',
            }
        },
        created() {
            EventBus.$on('myevent2', (data) => {
                console.log(data, '熊二给熊大传递的数据');
                this.info = data.info;
            })
        },
        methods: {
            callToXe() {
                EventBus.$emit('myevent1', {msg: this.msg});
            }
        },
        template: `
            <div>
            <h3>我是熊大组件</h3>
            <p>{{ info }}</p>

            <button @click="callToXe">打电话给熊二</button>
</div>
        `
    });

    /*
    * http://haokan.hao123.com/v?vid=13712616931200433523
    * */
    Vue.component('i-xe', {
        data() {
            return {
                msg: '',
                info: '好的，我已经收到了，感谢大哥！'
            }
        },
        created() {
            EventBus.$on('myevent1', (data) => {
                console.log(data, '熊大给熊二的数据');
                this.msg = data.msg;
            })
        },
        methods: {
            callUpBack() {
                EventBus.$emit('myevent2', {info: this.info})
            }
        },
        template: `
            <div>
            <h3>我是熊二组件</h3>
            <p>{{ msg }}</p>
            <button @click="callUpBack">回电话</button>
</div>
        `
    });

    new Vue({
        el: '#app',
        data: {
            msg: '兄弟通信'
        }
    })

</script>

</html>
